<script setup lang="ts">
// 定义是否折叠侧边栏的状态
import {ref} from "vue";

const isCollapse = ref(false)

</script>

<template>
  <!-- 左侧导航栏 -->
  <el-menu
      default-active="1"
      router
      background-color="#304156"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened
      :collapse="isCollapse"
      class="sidebar"
  >
    <el-menu-item index="/model" to="/model">
      <i class="el-icon-s-home"></i>
      <span>模型</span>
    </el-menu-item>
    <el-menu-item index="2" to="/panel">
      <i class="el-icon-document"></i>
      <span>面板</span>
    </el-menu-item>
    <el-menu-item index="3" to="/dom">
      <i class="el-icon-setting"></i>
      <span>DOM</span>
    </el-menu-item>
  </el-menu>
</template>

<style scoped>
:deep .el-menu {
  border-right: 0 !important;;
}

.sidebar {
  width: 70px;
  background-color: #304156;
  transition: width 0.3s;
}

</style>